<template>
<div class="city">
  <div class="Ctylheader">
    城市选择
    <router-link to="/">
      <div class="iconfont header-back">&#xe6bc;</div>
    </router-link>
  </div>
  <div class="sousuo">
    <span class="iconfont">&#xe61b;</span>
    <input v-model="keyvl" class="sousuo-p" type="text" placeholder="输入城市名称或拼音" style="border:none;outline:none" />
  </div>
  <div class="sousuo-list" v-show="keyvl">
    <ul>
      <li class="sousuo-list-li" v-for="item of list" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  name: 'Ctyleheader',
  props: {
    city: Object
  },
  data () {
    return {
      keyvl: '',
      list: [],
      timer: null
    }
  },
  watch: {
    keyvl () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        const result = []
        for (let i in this.city) {
          this.city[i].forEach((value) => {
            if (value.pingyin.indexOf(this.keyvl) > -1 || value.name.indexOf(this.keyvl) > -1) {
              result.push(value)
            }
          })
        }
        this.list = result
      }, 1)
    }
  }
}
</script>

<style lang="stylus" scoped>
.city
  overflow: hidden
  background: #00bcd4
  color: #fff
  .Ctylheader
    position: relative
    overflow: hidden
    height: 2.6rem
    line-height: 2.6rem
    background: #00bcd4
    color: #fff
    text-align: center
    font-size: .9rem
    .header-back
      text-align: center
      position: absolute
      top: 0
      left: 0
      float: left
      width: 10%
      font-size: 1.4rem
      color: #fff
  .sousuo
    position: relative
    overflow: hidden
    margin: 0 0.2rem 0.2rem 0.2rem
    background: #fbfafa
    height: 1.8rem
    line-height: 1.8rem
    .sousuo-p
      width: 100%
      color: #666
      position: absolute
      height: 1.8rem
      line-height: 1.8rem
    .iconfont
      color: #666
      height: 1.8rem
      line-height: 1.8rem
  .sousuo-list
    z-index: 1
    overflow: hidden
    position: absolute
    top: 4.6rem
    left: 0
    right: 0
    bottom: 0
    background: #eee
    color: #666
    .sousuo-list-ul
      margin: 0
      padding: 0
      line-height: .62rem
      padding-left: .2rem
      color: #666
</style>
